<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-12 08:38:02
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 13:41:54
 * @FilePath: /amap-web-vr/src/components/vr-collect-drawer/collect-list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-scrollbar height="95%">
       <div v-for="item in list" :key="item.data_id" class="infinite-list-item">
         <div class="content" @click="onClick(item)">
             <el-image :src="item.thumb_url" class="content_img" fit="cover" lazy/>
             <div class="content_title " >
                 <span>{{item.name}}</span>
                 <span>上传时间:{{item.create_time_text}}</span>
             </div>
             <el-icon><ArrowRight /></el-icon>
         </div>
     </div>
   </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
//  import { ref,onMounted } from 'vue';
 import {ArrowRight } from '@element-plus/icons-vue'
 import type{ ZFMyVrModel } from "../type";
 const emits = defineEmits(['tap']);
 defineProps({
   list: {
     type: Array as () => ZFMyVrModel[],
     default: () => []
   }
 })
 const onClick = (item: ZFMyVrModel) => {
   console.log("点击了", item);
   emits('tap', item);
 }
 


 </script>
 
 
 <style scoped lang="scss">
 .content{
     width: 100%;
     padding: 5px 0px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     border-bottom: solid 0.1px #E5E5E5;
     &_img{
         width: 60px;
         height: 60px;
         border-radius: 5px;
         flex-shrink: 0;
     }
     &_title{
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         height: 60px;
         flex: 1;
         span{
             font-size: 12px;
             color: #333333;
             margin-left: 5px;
             &:first-child{
               font-weight: bold;
             }
         }
     }
 }
 </style>